<template>
  <div v-permission="['stock:warehouse:query']">
    <page-wrapper content-full-height fixed-height>
      <!-- 表格区域 -->
      <vxe-grid id="WarningStock" ref="grid" resizable show-overflow highlight-hover-row keep-source row-id="id"
        :columns="tableColumn" :toolbar-config="toolBarConfig" :custom-config="{}" :pager-config="{}" :data="tableData"
        :loading="loading" height="auto">
        <!-- 搜索区域 -->
        <template #form>
          <j-border class="search-wrapper">
            <j-form label-width="80px" class="search-form">
              <div class="form-grid">
                <j-form-item label="商品条码" style="width: 100%">
                  <a-input v-model:value.trim="searchFormData.code" allow-clear placeholder="请输入商品条码" />
                </j-form-item>
                <j-form-item label="库存类型">
                  <a-space>
                    <a-select v-model:value="searchFormData.stockType" style="width: 120px" placeholder="请选择类型">
                      <a-select-option value="warning">库存警戒</a-select-option>
                      <a-select-option value="current">现有库存</a-select-option>
                    </a-select>
                    <a-select v-model:value="searchFormData.compareType" style="width: 80px" placeholder="比较">
                      <a-select-option value="gt">大于</a-select-option>
                      <a-select-option value="eq">等于</a-select-option>
                      <a-select-option value="lt">小于</a-select-option>
                    </a-select>
                    <a-input-number v-model:value="searchFormData.compareValue" style="width: 120px" placeholder="请输入值"
                      :min="0" :controls="false" />
                  </a-space>
                </j-form-item>
                <j-form-item label="商品名称" style="width: 100%">
                  <a-input v-model:value.trim="searchFormData.name" allow-clear placeholder="请输入商品名称" />
                </j-form-item>
                <j-form-item label="仓库名称" style="width: 100%">
                  <a-input v-model:value.trim="searchFormData.warehouse" allow-clear placeholder="请输入仓库名称" />
                </j-form-item>
              </div>
            </j-form>
            <div class="search-btn">
              <a-space>
                <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
              </a-space>
            </div>
          </j-border>
        </template>
        <!-- 工具栏 -->
        <template #toolbar_buttons>
          <a-space>
            <a-button type="primary" :icon="h(PlusOutlined)" @click="openAddDialog()">新增</a-button>
          </a-space>
        </template>

        <!-- 状态列 -->
        <template #status_default="{ row }">
          <a-tag :color="getStatusColor(row.status)">
          </a-tag>
        </template>

        <!-- 操作列 -->
        <template #action_default="{ row }">
          <table-action outside :actions="createActions(row)" />
        </template>
      </vxe-grid>

      <!-- 新增/修改窗口 -->
      <warning-dialog :id="currentId" v-model:visible="dialogVisible" :current-row="currentRow"
        @success="handleSuccess" />
    </page-wrapper>
  </div>
</template>

<script lang="ts">
import { h, defineComponent, ref } from 'vue';
import { SearchOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import WarningDialog from './components/WarningDialog.vue';

export default defineComponent({
  name: 'Warning',
  components: {
    SearchOutlined,
    PlusOutlined,
    ReloadOutlined,
    WarningDialog,
  },
  setup() {
    const loading = ref(false);
    const grid = ref();
    const id = ref('');
    const addDialog = ref();
    const updateDialog = ref();
    const warehouseDialog = ref();
    const currentId = ref('');
    const currentRow = ref<any>(null);
    const dialogVisible = ref(false);

    const searchFormData = ref({
      code: '',
      name: '',
      warehouse: '',
      stockType: 'warning',    // 库存类型：警戒/现有
      compareType: 'gt',       // 比较类型：大于/等于/小于
      compareValue: undefined, // 比较值
    });

    const tableColumn = [
      { type: 'checkbox' as const, width: 50, fixed: 'left' as const },
      { field: 'code', title: '商品条码', width: 140 },
      { field: 'name', title: '商品名称', minWidth: 200 },
      { field: 'spec', title: '规格名称', width: 120 },
      { field: 'currentStock', title: '现有库存', width: 100 },
      { field: 'warningStock', title: '警戒库存', width: 100 },
      { field: 'action', title: '操作', width: 120, slots: { default: 'action_default' }, fixed: 'right' as const },
    ];

    const toolBarConfig = {
      slots: {
        buttons: 'toolbar_buttons',
      },
    };

    // 模拟表格数据
    const mockData = [
      {
        id: '1',
        code: 'P001',
        name: '测试商品1',
        spec: 'XL',
        currentStock: 100,
        warningStock: 50,
      },
      {
        id: '2',
        code: 'P002',
        name: '测试商品2',
        spec: 'L',
        currentStock: 30,
        warningStock: 100,
      },
      {
        id: '3',
        code: 'P003',
        name: '测试商品3',
        spec: 'M',
        currentStock: 200,
        warningStock: 150,
      }
    ];

    const tableData = ref(mockData);

    const getStatusColor = (status: string) => {
      return status === 'ENABLE' ? 'success' : 'error';
    };

    const search = () => {
      // 实现查询逻辑
      console.log('Searching with:', searchFormData.value);
    };
    const resetSearch = () => {
      searchFormData.value = {
        code: '',
        name: '',
        warehouse: '',
        stockType: undefined,
        compareType: undefined,
        compareValue: undefined,
      };
      search();
    };
    const openAddDialog = () => {
      currentId.value = '';
      currentRow.value = {
        code: '',
        name: '',
        warehouse: '',
        warehouseName: '',
        currentStock: undefined,
        warningStock: undefined,
      };
      dialogVisible.value = true;
    };

    const openEditDialog = (row: any) => {
      currentId.value = row.id;
      currentRow.value = {
        code: row.code,
        name: row.name,
        warehouse: row.warehouse,
        warehouseName: row.warehouseName,
        currentStock: row.currentStock,
        warningStock: row.warningStock,
      };
      dialogVisible.value = true;
    };

    const handleSuccess = () => {
      dialogVisible.value = false;
      message.success(currentId.value ? '修改成功' : '新增成功');
      search();
    };

    const createActions = (row: any) => {
      return [
        {
          label: '编辑',
          onClick: () => openEditDialog(row),
        },
      ];
    };

    return {
      h,
      loading,
      grid,
      id,
      addDialog,
      updateDialog,
      searchFormData,
      SearchOutlined,
      PlusOutlined,
      tableColumn,
      toolBarConfig,
      tableData,
      search,
      resetSearch,
      openAddDialog,
      createActions,
      getStatusColor,
      // getStatusText,
      warehouseDialog,
      currentId,
      currentRow,
      dialogVisible,
      openEditDialog,
      handleSuccess,
    };
  },
});
</script>

<style lang="less" scoped>
.search-wrapper {
  position: relative;
  background-color: #fff;
  padding: 16px;
  border-radius: 2px;

  :deep(.search-form) {
    width: 60%;
    margin-right: 100px;

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .ant-form-item {
      margin: 0;
    }

    .ant-input,
    .ant-select {
      width: 100%;
    }

    .ant-space {
      width: 100%;
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: flex-start;

      .ant-select,
      .ant-input-number {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
      }

      .ant-input-number {
        height: 32px;

        .ant-input-number-input {
          height: 100%;
          line-height: 1;
          text-align: left;
          padding: 0 11px;
        }

        &:not(.ant-input-number-disabled) {
          border-color: #d9d9d9;
        }

        &.ant-input-number-focused {
          border-color: #40a9ff;
          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        &:hover {
          border-color: #40a9ff;
        }
      }
    }
  }

  :deep(.j-form-item-container) {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .ant-input-wrapper {
      width: 100%;
    }
  }

  .search-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
  }
}

.vxe-grid {
  margin-bottom: 16px;
}
</style>
